<template>
    <div class="wrap">
        <div class="mianbao">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/frame' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item>商品列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="header">
            <div class="headerInput">
                <el-input placeholder="请输入内容" v-model="inps">
                    <el-button slot="append" @click="listData(1,10,inps)" icon="el-icon-search"></el-button>
                </el-input>
            </div>
            <el-button type="primary" @click="onAdd">添加商品</el-button>
        </div>
        <div class="center">
            <template>
                <el-table
                    :data="tableData"
                    border
                    stripe
                    style="width: 100%">
                    <el-table-column
                    prop="index"
                    type="index"
                    width="50">
                    </el-table-column>
                    <el-table-column
                    prop="goods_name"
                    label="商品名称"
                    width="670">
                    </el-table-column>
                    <el-table-column
                    prop="goods_price"
                    label="商品价格"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="goods_weight"
                    label="商品重量"
                    width="80">
                    </el-table-column>
                    <el-table-column
                    prop="upd_time"
                    label="创建时间"
                    width="160">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>

        </div>
        <div class="footer">
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10,2, 20, 30]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="lens.length">
                </el-pagination>
            </div>

        </div>    
    </div>  
</template>

<script>
    import axios from 'axios';
    export default{
        name:"GoodsName1",
        data() {
            return {
                tableData: [],
                currentPage4: 1,
                pagenum:1,
                pagesize:10,
                lens:"",
                inps:""
            }
        },
        async created(){
            let len =await this.$http.getProductList(1,10000);
            this.lens=len.data.data.goods
            let res =await this.$http.getProductList(1,10);
            this.tableData=res.data.data.goods
        },
        methods: {
            async listData(num,size,data=null){
                console.log(data);
                let len =await this.$http.getProductList(1,10000,data);
                this.lens=len.data.data.goods
                let res =await this.$http.getProductList(num,size,data);
                this.tableData=res.data.data.goods
            },
            handleSizeChange(val){
                this.pagesize=val
                this.listData(this.pagenum,val)
            },
            handleCurrentChange(val) {
                this.pagenum=val
                this.listData(val,this.pagesize,this.inps)
            },
            async handleDelete(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        axios({
                            url:`http://47.102.159.133:8888/api/private/v1/goods/${row.goods_id}`,
                            method:"delete",
                        })
                        this.listData(this.pagenum,this.pagesize)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                });
            },
            onAdd(){
                this.$router.push("/frame/goods/addgood")
            }
        }
    }
</script>

<style lang="less" scoped>
    .mianbao{
        width: 100%;
        height: 30px;
        // background: red;
        float: left;
        padding-top: 20px;
    }
    .wrap{
        margin: 60px auto 0;
        width: 82vw;
        font-size: 12px;
        // background: #ddd;
        border-radius: 10px;
        margin-bottom: 90px;
        padding-bottom: 10px;
            .header{
                width: 100%;
                height: 55px;
                display: flex;
                align-items: center;
                .headerInput{
                    width: 400px;
                    margin: 0 10px;
                    ::v-deep .el-input__inner{
                        height: 28px;
                    }
                }
                .el-button{
                    height: 28px;
                    padding: 8px 10px;
                    font-size: 12px;
                }
            }
            .center{
                width: 98%;
                background: blue;
                margin: 5px 10px;
            }
            .footer{
                width: 98%;
                height: 50px;
                margin: 5px 10px;
                // background: red;
            }    
    }
    ::v-deep .el-table__cell{
        padding: 5px 0;
        font-size: 12px;
    }
</style>